<template>
      <div>
        <div>
          <el-table
              :data="tableData"
               border
              :row-class-name="tableRowClassName"
              style="width: 100%">
            <el-table-column
                prop="id"
                sortable
                label="ID"
                width="60px">
            </el-table-column>
            <el-table-column
                prop="reason"
                label="原因">
            </el-table-column>
            <el-table-column
                prop="access_name"
                label="申请人"
                width="80px">
            </el-table-column>
            <el-table-column
                prop="access_phone"
                label="手机号"
                width="100px">
            </el-table-column>
            <el-table-column
                prop="access_ids"
                label="身份证号">
            </el-table-column>
            <el-table-column
                label="健康码"
                width="100px">
              <template slot-scope="scope">
                <el-image :src="baseURL+scope.row.access_code" :preview-src-list="[baseURL+scope.row.access_code]"></el-image>
              </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="出入类型"
                sortable
                width="100px">
            <template slot-scope="scope">
              <el-tag>{{typeStr(scope.row.type)}}</el-tag>
            </template>
            </el-table-column>
            <el-table-column
                prop="enter_date"
                sortable
                label="入校时间">
            </el-table-column>
            <el-table-column
                prop="out_date"
                sortable
                label="出校时间">
            </el-table-column>
            <el-table-column
                label="状态"
                sortable
                prop="state"
                width="80px">
            <template slot-scope="scope">
              <el-tag size="small" :type="accessState(scope.row.state).style">{{ accessState(scope.row.state).label }}</el-tag>
            </template>
            </el-table-column>
            <el-table-column
                prop="create_date"
                label="提交时间">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
            >
              <template slot-scope="scope" >
                <el-button type="primary" plain @click="updateClick(scope.row)">审核</el-button>
<!--                <el-button type="primary" v-if="scope.row.state==2" plain @click="updateClick(scope.row)">重审</el-button>-->
                <el-button type="primary" v-if="scope.row.state==1" plain @click="useClick(scope.row)">使用</el-button>
                <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
              layout="prev, pager, next"
              :page-size="10"
              :current-page="pagenum"
              @current-change="pageChange"
              :total="total">
          </el-pagination>
        </div>


      </div>
</template>

<script>
import {deleAccess, editAccess, editTask, getAccess} from "@/request";
import menu from '@/assets/menu.json'

export default {
  name: "access",
  data(){
    return {
      pagenum:1,
      formSearch:{},
      tableData:[],
      total:0,
      AccessState:menu.AccessState,
      updateForm:{}
    }
  },
  computed:{
    typeStr(){
      return function (type){
       switch (type) {
        case 1:
          return '出';
        case 2:
          return '入';
        case 3:
          return '出入';
        case 4:
          return '入出';
       }
      }
    },
    accessState(){
      return function (type){
        return this.AccessState.find(o=>o.value==type)
      }
    }
  },
  created() {
    this.getAccess()
  },
  methods:{
    tableRowClassName({row}) {
      console.log(row)
      if (row.state==0) {
        return 'success-row';
      }
      return '';
    },
    useClick(item){
      this.$confirm('是否使用了该次出入申请？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '已被使用',
        cancelButtonText: '取消'
      }).then(async () => {
        let data=await editAccess({
          id:item.id,
          state:3
        });
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.error(data.message);
        this.getAccess()
      })
          .catch(async action => {
            this.$message({
              type: 'info',
              message:'取消'
            })
          });

    },
    updateClick(item){
      this.$confirm('是否同意该次出入申请？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '同意',
        cancelButtonText: '拒绝'
      }).then(async () => {
            let data=await editAccess({
              id:item.id,
              state:1
            });
            if(data.code!=200)return this.$message.error(data.message);
            this.$message({
              type: 'info',
              message: '保存修改'
            });
        this.getAccess()
          })
          .catch(async action => {
            if(action === 'cancel'){
              let data=await editAccess({
                id:item.id,
                state:2
              });
              if(data.code!=200)return this.$message.error(data.message);
              this.getAccess()
            }else{
              this.$message({
                type: 'info',
                message:'取消'
              })
            }
          });

    },
    async getAccess(){
      this.formSearch['pagenum']=this.pagenum;
      let data=await getAccess(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data.list;
      this.total=data.data.total;
    },
    pageChange(val){
      this.pagenum=val
      this.getAccess();
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleAccess({id});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getAccess()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>
/deep/ .el-table .warning-row {
  background: oldlace;
}

/deep/  .el-table .success-row {
  background: #f0f9eb;
}
</style>